<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="loadKMLFile,onKMLParsed" />
  <title>HERE Maps API Example: Loading a KML file: Cities in China</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript" 
    data-params="maps,datarendering" 
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad"
    data-parent="demos/generate-kml/">
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Loading a KML File : Chinese Cities</h1>
  <p>This example retrieves a KML file holding the name and population of a series
   of Chinese Cities from from the local domain and
  parses the file using the KML parser. The file has been generated using
  the KML generation tool.</p>
  <p>The KML file is located at:
    <a href="./kml/chinese-cities.kml">./kml/chinese-cities.kml</a>
  </p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="kml" type="text/javascript" >
//<![CDATA[
var map,
  infoBubbles,
  container;

function onKMLParsed(kmlManager) {
  var resultSet;
  // KML file was successfully loaded
  if (kmlManager.state === 'finished') {
    // KML file was successfully parsed
    resultSet = new nokia.maps.kml.component.KMLResultSet(kmlManager.kmlDocument, map);
    resultSet.addObserver('state', function (resultSet) {
      if (resultSet.state === 'finished') {
        container = resultSet.container;
        map.objects.add(container);
        map.zoomTo(container.getBoundingBox());
      }
    });
    resultSet.create();
  }
}

function loadKMLFile() {
  var kml = new nokia.maps.kml.Manager();
  // We define a callback function for parsing kml file,
  // and then push the parsing result to map display
  // Add an observer to kml manager
  kml.addObserver('state', onKMLParsed);
  kml.parseKML('./kml/chinese-cities.kml');
}

function afterHereMapLoad(theMap) {
  map = theMap;
  infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.components.add(infoBubbles);
  loadKMLFile(map);
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
